<template>
	<view class="novel_catalog">
		<view class="catalog">
			<view class="top_info">
				<view class="image">
					<image :src="image" mode=""></image>
				</view>
				<view class="info">
					<text class="title">{{queryObj.novelname}}</text>
					<view class="novel_info">
						{{info}}
					</view>
					<view class="other_info">
						<text>{{author}}</text>
					</view>
				</view>
			</view>
			<view class="catalogNum">
				<view class="number">
					<view v-for="(item,index) in numbers" :key="index" @click="gotoNovel(item)">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObj: {
					classify: '',
					novelname: ''
				},
				catalogList: [],
				image: '',
				author: '',
				info: '',
				numbers: []
			};
		},
		onLoad(options) {
			this.queryObj.classify = options.classify,
				this.queryObj.novelname = options.title,
				this.image = options.image,
				this.info = options.info,
				this.author = options.author
			this.getNovelCatalog()
		},
		methods: {
			async getNovelCatalog() {
				const {
					data: res
				} = await this.$myRequest({
					url: '/my/article/novel/catalog',
					data: this.queryObj
				})
				if (res.status != 0) {
					return uni.showToast({
						title: '此小说跑丢了呦',
						duration: 2000,
						icon: 'error'
					})
				}
				this.catalogList = res.data
				this.getCatalogNum()
			},

			getCatalogNum() {
				for (var i in this.catalogList) {
					// this.numbers.push(parseInt(this.catalogList[i].substring(0, 4).match(/\d+/g)[0]))
					this.numbers.push(parseInt(this.catalogList[i].substring(0, 4).match(/\d+/g)))
				}
				this.numbers.sort(function(a, b) {
					return a - b
				})

			},

			gotoNovel(item) {
				for (var i in this.catalogList) {
					if (parseInt(this.catalogList[i].substring(0, 4).match(/\d+/g)) == item) {
						// console.log(this.catalogList[i])
						uni.navigateTo({
							url: `/subpkg/novel-content/novel-content?novelName=${this.catalogList[i]}&classify=${this.queryObj.classify}&name=${this.queryObj.novelname}`
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.top_info {
		display: flex;
		box-shadow: -3px 4px 5px rgba(0, 0, 0, 0.3);
		padding: 10rpx 10rpx;

		.image {
			image {
				width: 240rpx;
				height: 330rpx;
				border-radius: 10px;
			}
		}

		.info {
			.title {
				font-weight: 700;
				padding-left: 20rpx;
				font-size: 30rpx;
			}

			.novel_info {
				word-break: break-all;
				margin: 20rpx;
				color: #5d5d5d;
				font-size: 26rpx;
			}

			.other_info {
				display: flex;
				margin-top: 40rpx;
				padding-left: 20rpx;
				color: #949bad;
				font-size: 24rpx;
			}
		}

	}

	.number {
		display: flex;
		flex-wrap: wrap;

		view {
			width: 80rpx;
			height: 40rpx;
			margin: 20rpx 13rpx;
			padding: 20rpx 20rpx;
			border: 1px solid #828282;
			border-radius: 10px;
			word-break: break-all;
			overflow: hidden;
			text-align: center;
			box-shadow: -3px 4px 5px rgba(0, 0, 0, 0.3);
		}

		view:active {
			// background-color: #dc4e41;
			// background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
			background: -webkit-linear-gradient(left top, #FA5A55, #FA994D);
		}
	}
</style>
